<script>
// 导入所有内容，然后放在一个叫 echarts 的对象中
// * 所有图表类型，as 相当于起一个别名
import * as echarts from 'echarts';

export default {
  data () {
    return {
      xAxisData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      seriesData: [5, 20, 36, 10, 10, 20],
      seriesType: 'line',
      myChart: null
    }
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById('main'));

    // 初始化表格数据
    this.initChart()
  },
  methods: {

    initChart () {
      this.myChart.setOption({
        title: {
          text: 'ECharts 图表展示'
        },
        tooltip: {},
        toolbox: {
          feature: {
            saveAsImage: {
              name: '我的世界'
            }
          }
        },
        xAxis: {
          data: this.xAxisData
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: this.seriesType,
            data: this.seriesData
          }
        ]
      });
    },

    changType (type) {
      // 修改类型
      this.seriesType = type
      // console.log(this.seriesType);
      // 重新进行数据添加
      this.initChart()

      // 当数据改变后，但是页面没有重新渲染，可以使用$forceUpdate()进行强制渲染
      // this.$forceUpdate()



    },
    changeData (type) {
      if (type == '10010') {
        // 家电数据
        this.xAxisData = ['冰箱', '洗衣机', '电视', '空调', '破壁机', '电风扇']
        this.seriesData = [1998, 2000, 28888, 32222, 1000, 2999]

      } else if (type == '10086') {
        // 水果数据
        this.xAxisData = ['榴莲', '车厘子', '火龙果', '牛油果', '猕猴桃', '芒果']
        this.seriesData = [24243, 45654, 56453, 32222, 22423, 76554]
      }

      // 只要数据有发生改变就需要重新设置数据
      this.initChart()
    }
  }
}
</script>
<template>
  <div>
    <el-button @click="changType('line')">折线图</el-button>
    <el-button @click="changType('bar')">柱状图</el-button>
    <el-button @click="changType('pie')">饼图</el-button>
    <el-button @click="changType('scatter')">散点图</el-button>
    <el-button @click="changeData('10010')">家电销量</el-button>
    <el-button @click="changeData('10086')">水果销量</el-button>


    <!-- 用来展示图表用的 -->
    <main id="main"></main>
  </div>
</template>
<style scoped lang="scss">
#main {
  height: 500px;
  background-color: white;
}
</style>
